<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轩正企业人事管理系统 - 普通用户主页</title>
    <link rel="stylesheet" href="css/dashboard.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/watermark.css">
    <link rel="stylesheet" href="css/manager.css">
    <link rel="stylesheet" href="css/ai-chat.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header header-normal">
            <h1>轩正企业人事管理系统 - 普通用户</h1>
            <div class="user-info">
                <span id="user-name">加载中...</span>
                <span id="user-id">用户ID: 加载中...</span>
                <a href="logout">退出登录</a>
            </div>
        </div>
        
        <div class="welcome-container">
            <div class="welcome-message">欢迎回来！</div>
            <button id="refresh-btn" class="refresh-btn"><i class="fas fa-sync-alt"></i> 刷新</button>
        </div>
        
        <div class="main-content">
            <!-- 左侧二级菜单 -->
            <div class="submenu">
                <div class="submenu-item">
                    <a href="#" class="active" data-target="dashboard">首页</a>
                </div>
                <div class="submenu-item">
                    <a href="#" data-target="join-company">加入公司</a>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="announcements">查看公告</a>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="employees">查找员工</a>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="clock-in">打卡</a>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="clock-records">打卡记录</a>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="my-tasks">我的任务</a>
                    <span class="notification-count" id="notification-my-tasks"></span>
                </div>
                <div class="submenu-item submenu-feature">
                    <a href="#" data-target="performance-points">绩点查看</a>
                </div>
                <div class="submenu-item">
                    <a href="#" data-target="profile">个人资料</a>
                </div>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content-area">
                <div id="dashboard" class="function-content active">
                    <h2>首页</h2>
                    <div class="dashboard-container">
                        <!-- 日历部分 -->
                        <div class="dashboard-widget calendar-widget">
                            <h3><i class="fas fa-calendar-alt"></i> 日历</h3>
                            <div id="calendar-container">
                                <div class="calendar-header">
                                    <button id="prev-month" class="calendar-nav-btn"><i class="fas fa-chevron-left"></i></button>
                                    <span id="current-month-year"></span>
                                    <button id="next-month" class="calendar-nav-btn"><i class="fas fa-chevron-right"></i></button>
                                </div>
                                <div class="calendar-grid">
                                    <div class="calendar-weekdays">
                                        <div class="weekday">日</div>
                                        <div class="weekday">一</div>
                                        <div class="weekday">二</div>
                                        <div class="weekday">三</div>
                                        <div class="weekday">四</div>
                                        <div class="weekday">五</div>
                                        <div class="weekday">六</div>
                                    </div>
                                    <div id="calendar-days" class="calendar-days"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 专注计时器部分 -->
                        <div class="dashboard-widget timer-widget">
                            <h3><i class="fas fa-clock"></i> 专注计时器</h3>
                            <div class="timer-container">
                                <div class="timer-display">
                                    <span id="timer-minutes">25</span>:<span id="timer-seconds">00</span>
                                </div>
                                <div class="timer-controls">
                                    <button id="timer-start" class="timer-btn timer-start"><i class="fas fa-play"></i> 开始</button>
                                    <button id="timer-pause" class="timer-btn timer-pause" style="display:none;"><i class="fas fa-pause"></i> 暂停</button>
                                    <button id="timer-reset" class="timer-btn timer-reset"><i class="fas fa-stop"></i> 重置</button>
                                </div>
                                <div class="timer-presets">
                                    <button class="preset-btn" data-minutes="15">15分钟</button>
                                    <button class="preset-btn active" data-minutes="25">25分钟</button>
                                    <button class="preset-btn" data-minutes="45">45分钟</button>
                                    <button class="preset-btn" data-minutes="60">60分钟</button>
                                </div>
                                <div class="timer-status" id="timer-status">准备开始专注时间</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="join-company" class="function-content">
                    <h2>加入公司</h2>
                    <div class="status-actions">
                        <div id="join-company-status"></div>
                        <button class="refresh-btn" id="refresh-join-status-btn"><i class="fas fa-sync-alt"></i> 刷新状态</button>
                    </div>
                    <div id="join-company-form-container">
                        <!-- 这里将显示加入公司表单或申请状态 -->
                    </div>
                </div>
                
                <div id="announcements" class="function-content">
                    <h2>查看公告</h2>
                    <div class="status-actions">
                        <button class="refresh-btn" id="refresh-announcements-btn"><i class="fas fa-sync-alt"></i> 刷新公告</button>
                    </div>
                    <div id="announcements-container">
                        <div class="loading">加载中...</div>
                    </div>
                </div>
                
                <div id="employees" class="function-content">
                    <h2>查找员工</h2>
                    <div class="search-container">
                        <input type="text" id="employee-search" placeholder="输入员工ID、姓名、电话或职位搜索...">
                        <button id="search-employee-btn" class="btn btn-primary"><i class="fas fa-search"></i> 搜索</button>
                        <button id="reset-employee-search-btn" class="btn btn-secondary"><i class="fas fa-redo"></i> 重置</button>
                    </div>
                    <div id="employees-container">
                        <div class="loading">加载中...</div>
                    </div>
                    <!-- 员工详情模态框 -->
                    <div id="employee-detail-modal" class="modal">
                        <div class="modal-content">
                            <span class="close-modal">&times;</span>
                            <h3>员工详情</h3>
                            <div id="employee-detail-content"></div>
                        </div>
                    </div>
                </div>
                
                <div id="clock-in" class="function-content">
                    <h2>打卡</h2>
                    <div class="status-actions">
                        <button id="refresh-attendance-btn" class="refresh-btn"><i class="fas fa-sync-alt"></i> 刷新打卡状态</button>
                    </div>
                    <div id="today-attendance-status" class="attendance-status">
                        <div class="loading">加载中...</div>
                    </div>
                    <div class="attendance-actions">
                        <button id="check-in-btn" class="btn btn-primary btn-lg">上班打卡</button>
                        <button id="check-out-btn" class="btn btn-success btn-lg">下班打卡</button>
                    </div>
                    <div id="attendance-message" class="attendance-message"></div>
                    <div id="debug-info" class="debug-info" style="margin-top: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; display: none;">
                        <h4>调试信息</h4>
                        <pre id="debug-content"></pre>
                        <button id="toggle-debug-btn" class="btn btn-sm btn-secondary">显示/隐藏调试信息</button>
                    </div>
                </div>
                
                <div id="clock-records" class="function-content">
                    <h2>打卡记录</h2>
                    <div id="clock-records-content">
                        <div class="filter-container">
                            <div class="date-filter">
                                <label for="user-record-date">日期：</label>
                                <input type="date" id="user-record-date" class="form-control">
                            </div>
                            <button class="refresh-btn" id="refresh-records-btn"><i class="fas fa-sync-alt"></i> 刷新记录</button>
                        </div>
                        
                        <div id="attendance-records-container">
                            <div class="loading">加载中...</div>
                        </div>
                    </div>
                </div>
                
                <div id="my-tasks" class="function-content">
                    <h2>我的任务</h2>
                    <p class="placeholder-text">我的任务功能正在开发中，敬请期待...</p>
                </div>
                
                <div id="performance-points" class="function-content">
                    <h2>绩点查看</h2>
                    <p class="placeholder-text">绩点查看功能正在开发中，敬请期待...</p>
                </div>
                
                <div id="profile" class="function-content">
                    <h2>个人资料</h2>
                    <div id="profile-content">
                        <div id="user-profile" class="loading">
                            加载中...
                        </div>
                        
                        <div id="profile-form-container" style="display: none;">
                            <h3>修改个人资料</h3>
                            <form id="update-profile-form">
                                <div class="form-group">
                                    <label for="profile-name">姓名</label>
                                    <input type="text" id="profile-name" name="name" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label for="profile-gender">性别</label>
                                    <select id="profile-gender" name="gender" class="form-control" required>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="profile-phone">手机号</label>
                                    <input type="text" id="profile-phone" name="phone" class="form-control" required pattern="[0-9]{11}" title="请输入11位手机号码">
                                </div>
                                <div class="form-group">
                                    <label for="profile-email">邮箱</label>
                                    <input type="email" id="profile-email" name="email" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="profile-address">住址</label>
                                    <input type="text" id="profile-address" name="address" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-primary">保存修改</button>
                                    <button type="button" id="cancel-edit-btn" class="btn btn-secondary">取消</button>
                                </div>
                            </form>
                        </div>
                        
                        <div class="profile-actions">
                            <button id="edit-profile-btn" class="btn btn-primary">修改信息</button>
                            <button id="delete-account-btn" class="btn btn-danger">注销账号</button>
                            <button id="leave-company-btn" class="btn btn-warning">退出公司</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- AI聊天弹窗按钮 -->
    <div id="ai-chat-fab" class="ai-chat-fab">
        <i class="fas fa-robot"></i>
        <span class="fab-text">AI</span>
    </div>
    <div id="ai-chat-modal" class="modal ai-chat-modal">
        <div class="modal-content ai-chat-content">
            <div class="modal-header ai-chat-header">
                <h3><i class="fas fa-robot"></i> AI助手</h3>
                <span class="modal-close ai-chat-close">&times;</span>
            </div>
            <div class="modal-body ai-chat-body">
                <div id="ai-chat-messages" class="ai-chat-messages">
                    <div class="ai-message">
                        <div class="message-content">
                            <i class="fas fa-robot"></i>
                            <span>你好！我是AI助手，有什么可以帮助您的吗？</span>
                        </div>
                    </div>
                </div>
                <div class="ai-chat-input-area">
                    <div class="ai-chat-info">
                        <span id="ai-usage-info">今日剩余提问次数: 加载中...</span>
                        <!-- 模型选择器 -->
                        <div class="ai-model-selector">
                            <label for="ai-model-select">选择模型:</label>
                            <select id="ai-model-select">
                                <!-- 模型动态加载 -->
                            </select>
                        </div>
                    </div>
                    <div class="ai-chat-input-container">
                        <textarea id="ai-chat-input" placeholder="请输入您的问题..." rows="3"></textarea>
                        <button id="ai-chat-send" class="ai-send-btn">
                            <i class="fas fa-paper-plane"></i>
                            发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/dashboard.js"></script>
    <script src="js/home.js"></script>
    <script src="js/normal_home.js"></script>
    <script src="js/normal_profile.js"></script>
    <script src="js/watermark.js"></script>
    <script src="js/ai-chat.js"></script>
    <script src="js/notification-manager.js"></script>
</body>
</html>
